<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../lib/vue.js"></script>
  <script src="../lib/vue-router.js"></script>
  <style>
     .box1{
          width:60%;
          border:1px solid darkorchid;
          border-radius: 10px;
          padding:20px;
        }

        .router-link-exact-active,  .router-link-active{
          color:deeppink;
          border:1px solid deepskyblue;
          padding:5px;
          border-radius: 5px;
          background: darkslateblue;
        }
  </style>
</head>
<body>
    <div id="app">
       <h2> {{title }}</h2>
       <myhead></myhead>
       <hr>
      <!-- 5.路由出口 加载路由组件的地方  -->
      <router-view class="box1"></router-view>

      <!-- 6. 路由导航  -->
      <router-link to="/home">首页</router-link>
      <router-link :to="{name:'home'}">首页2</router-link>
      <router-link :to="{name:'find'}">发现</router-link>
      <router-link :to="{path:'/pengyouquan'}">发现  2 </router-link>


      <router-link to="/news/1105/info/武汉?salary=12000">新闻-武汉</router-link>
      <!-- <router-link to="/news/1111/info?salary=18000">新闻-杭州</router-link> -->
      <router-link  :to="{name:'news', params:{day:1111,address:'杭州'} ,  query:{salary:18888} }">新闻-杭州</router-link>

      <router-link to="/user/2110/zuozuomu?time=1105&age=18#day5">用户中心 -- zuozuomu</router-link>
      <!-- <router-link to="/user/2108/lesson?time=1111&age=33#day18">用户中心 -- 大雷</router-link> -->
      <router-link :to="{name:'user',  params:{uid:2108,uname:'lesson'}  ,query:{time:1101,age:36}}">用户中心 -- 大雷</router-link>
      <router-link :to="{name:'admin'}">管理员1 </router-link>
      <router-link to="/user/10001/admin">管理员2 </router-link>

    </div>

    <template id="head">
      <header>
        WH2110-DAYDAYUP
      </header>
    </template>
    <template id="home">
      <div>
        <h2>Home - Home - Home </h2>
      </div>
    </template>
    <template id="news">
      <div>
        <h2>News - News - 今日新闻  </h2>
        <h2>路由参数 $route.params </h2>
        <p>day -- {{$route.params.day}}</p>
        <p>address - {{$route.params.address || '北京'}}</p>
        <p>salary === {{$route.query.salary}}</p> 
      </div>
    </template>
    <template id="user">
      <div>
        <h2>User - User - 用户中心  </h2>
        <h1>$route  路由信息对象 </h1>
        <p> 路由参数 :  $route.params </p>
        <h2>uid ==  {{$route.params.uid }}</h2>
        <h2>uname  ==  {{$route.params.uname }}</h2>
        <p>查询参数 ? $route.query  </p>
        <p>time === {{$route.query.time }}</p>
        <p>age  === {{$route.query.age }}</p>

        <p>路由名称 name : {{$route.name }}</p>
        <p>路由路径 path: {{$route.path }}</p>
        <p>路由hash  : {{$route.hash }}</p>
        <p>路由的完整路径 :  {{$route.fullPath}}</p>
        <p>路由的标记信息 meta :  {{$route.meta.phone }}</p>

      </div>
    </template>
    
    <template id="find">
      <div>
        <h2>FInd - FInd - 发现美丽</h2>
      </div>
    </template>
    <script>
      // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
      Vue.component("myhead",{
        template:"#head"
      })
      // 1. 定义路由组件
      const Home = {
        template:"#home"
      }
      const News = {
        template:"#news"
      }
      const User = {
        template:"#user"
      }
      const Find = {
        template:"#find "
      }
      const NotFound = {
        template:"<h2>404 - 404 - NotFound </h2>"
      }
      // 2. 定义路由 (定义路由里面组件和地址路径的映射关系)
      const routes = [
          {
            path:"/",
            redirect:{
              name:"home"
            }
          },
         {
           path:"/home",
           component:Home,
           name:"home", // 路由名称 命名路由
         },
         {
           path:"/find",
           alias:"/pengyouquan", // 路由别名
           name:"find",
           component:Find
         },
         {
           path:"/news/:day/info/:address?",
           component:News,
           name:"news",
           meta:{

           }
         },
         {
           path:"/user/10001/admin",
           component: {
             template:"<h1>管理员 - admin  - 10001 </h1>"
           },
           name:"admin",
         },
         {
           path:"/user/:uid/:uname?",
           component:User ,
           name:"user",
           meta:{
             islogin:true,
             keep:true ,
             phone:"18012341234"
           }
         },
        
         {
           path:"/404",
           component:NotFound,
           name:'404' 
         },
        //  {
        //    path:"*",
        //    component:NotFound
        //  }
        {
          path:"*",
          redirect:"/404"
        }
      ]
      // 3. 创建路由 
      const router = new VueRouter({
        routes,
      })
      // 4. 挂载到根实例 
      const vm = new Vue({
        router ,
        el:"#app",
        data:{
          title:"Vue 路由的传参 动态路由  "
        },
        watch:{
          '$route':function(to,from){
            console.log(to)   // 即将进入的路由
            console.log(from) // 即将离开的路由 
          }
        },
        mounted(){
          console.log(this.$router)  // router 路由对象  负责路由切换 重定向
          console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
        }
      })
    </script>
     <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     
        
        $route  路由对象属性 
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变  
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  


        router-link 的 高亮 path  
     -->
</body>
</html>